<template>
  <div class="homeHeader_bigboxox">
    <div class="homeHeader_bigbox">
      <div class="top_left top-left" @click="blackClick">
        <span class="iconfont">&#xe6f0;</span>
      </div>
      <div class="top_input">城市选择</div>
    </div>
    <div class="city_input">
      <input type="text" v-model="binginputkey" placeholder="输入城市名字" />
    </div>
    <!-- 开始搜索部分内容 
	v-show="binginputkey":当输入的时候，则搜索内容显示，当输入框为空，则下面的内容隐藏，显示字母城市
	v-show="changdu"：当输入框的内容不符，则显示没有该数据，当
    -->
    <ul class="sosuo_lu_bg" ref="ratingsWrapper" v-show="binginputkey">
      <li>
        <div
          class="sosuo_li_font"
          v-for="item of list"
          :key="item.id"
          @click="cityClick(item.name)"
        >{{item.name}}</div>

        <div class="sosuo_li_font" v-show="changdu">没有找到匹配的数据！</div>
      </li>
    </ul>
  </div>
</template> 

<script>
// better-scroll注意事项，引入这个组件时候，他的原生点击事件不生效，需要在下面写click：true。
import BScroll from "better-scroll";
import { mapMutations } from "vuex";
export default {
  props: {
    cities: Object //搜索返回的是后台返回的热门城市的数据，而数据类型是对象，所以在外面父组件需要传递过来，而自己身为子组件接收父组件传递过来的数据。
  },
  data() {
    return {
      binginputkey: "", //双向绑定，当input输入的时候，你底部应该有蒙版出现搜索的热门城市。
      list: [], //这是代表你搜索的热门城市的数组
      timer: null //这还是为了节流，防止频繁执行操作。
    };
  },
  //  计算属性
  computed: {
    changdu() {
      return !this.list.length;
    }
  },
  //  start
  // 监听器，监听binginputkey 也就是监听input搜索框的输入改变，为了节流频繁操作
  watch: {
    binginputkey() {
      // 若是执行操作则清除
      if (this.timer) {
        clearTimeout(this.timer);
      }
      //   监听，当输入框为空的时候，则list的数组为空，显示没有该数据
      if (!this.binginputkey) {
        this.list = [];
        return;
      }
      // 若是没有执行此操作则拖迟100毫秒执行
      this.timer = setTimeout(() => {
        const result = [];
        // 循环
        for (let i in this.cities) {
          this.cities[i].forEach(value => {
            // 若是返回的数组中有spell，和name能搜索到关键词则添加到result中
            if (
              value.spell.indexOf(this.binginputkey) > -1 ||
              value.name.indexOf(this.binginputkey) > -1
            ) {
              result.push(value);
            }
          });
        }
        this.list = result;
      }, 100);
    }
  },
  // 挂载之后渲染执行的函数,
  mounted() {
    // BScroll使用这个组件的时候，记住他下面的点击事件不生效，解决方法就是click：true
    this.scroll = new BScroll(this.$refs.ratingsWrapper, {
      click: true
    });
  },
  // 点击函数
  methods: {
    blackClick() {
      console.log(-1);
      this.$router.replace("/");
    },
    // 点击搜索的城市更换热门城市
    cityClick(city) {
      // 笨方法
      // this.$store.commit("changeCity", city);
      // 使用mapMutations 来改写上面的写法
      this.changeCity(city);
      console.log(city);
      this.$router.replace("/");
    },
    // 优化使用vuex 高级用法mapMutations来优化上面的this.$store.commit使用，记得在上面import {}from 'vuex'引入，他里面的changeCity并不是随意些，而是在store中mutations定义有
    ...mapMutations(["changeCity"])
  }
  //  结束
};
</script>
<style lang="stylus" scoped>
/* **
正常引入：@import '../../../assets/stylus/varbles';
也可以简单引入css：@import '~@/assets/stylus/varbles';
还可以优化@import '~styles/varbles';
** */
@import '~styles/varbles';

.homeHeader_bigboxox {
  background-color: $bgColor;
}

.homeHeader_bigbox {
  display: flex;
  line-height: 0.86rem;
  color: #ffffff;

  .top_left {
    float: left;
    width: 1.14rem;
    text-align: center;
  }

  .top_input {
    flex: 1;
    height: 0.3rem;
    text-align: center;
    font-size: 0.45rem;
  }
}

.city_input {
  text-align: center;
  height: 0.7rem;
  line-height: 0.7rem;
  padding: 0.2rem 0;

  input {
    width: 92%;
    box-sizing: border-box;
    height: 0.7rem;
    line-height: 0.7rem;
    text-align: center;
  }
}

.sosuo_lu_bg {
  width: 100%;
  position: absolute;
  top: 1.83rem;
  left: 0;
  right: 0;
  bottom: 0;
  background: green;
  z-index: 1;
  overflow: hidden;

  .sosuo_li_font {
    font-size: 0.4rem;
    line-height: 0.6rem;
    color: #fff;
  }
}
</style>